<template>
  <div id="dispatch-page" class="main-content">
    <!-- 顶部导航栏 -->
    <el-container>
      <el-main
        style="
          padding: 14px;
          background-color: #0c1e3e;
          height: calc(100vh - 60px);
        "
      >
        <!-- 主内容区域 -->
        <el-row :gutter="16" style="height: 100%">
          <!-- 左侧服务需求统计 -->
          <el-col
            :span="6"
            style="display: flex; flex-direction: column; height: 100%"
          >
            <!-- 服务资源详情 -->
            <el-card
              class="custom-card glow-card"
              id="leftCard"
              style="
                flex: 1;
                min-height: 600px;
                display: flex;
                flex-direction: column;
                border-radius: 12px;
                border: 1px solid rgba(90, 200, 250, 0.3);
              "
            >
              <div slot="header" class="card-header" style="margin-top: 8px">
                <i
                  class="el-icon-info"
                  style="margin-right: 8px; color: #5ac8fa"
                ></i>
                <span style="color: #fff; font-weight: 600">服务资源详情</span>
              </div>
              <div class="service-detail">
                <div v-if="hasServiceResource">
                  <div
                    v-for="item in selectedServiceResource"
                    :key="item.id"
                    class="dispatch-item"
                  ></div>
                </div>

                <div class="detail-item">
                  <div class="detail-label">服务组织名称</div>
                  <div class="detail-value ellipsis">
                    隆中思维新型经济综合社
                  </div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">主要服务产业</div>
                  <div class="detail-value">水稻</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">服务类型</div>
                  <div class="detail-value ellipsis">
                    种植、施肥、植保、飞防作业
                  </div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">作业面积</div>
                  <div class="detail-value">40亩</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">完成次数</div>
                  <div class="detail-value">
                    <div class="completion-info">
                      <span>199/200次</span>
                      <el-progress
                        :percentage="99.5"
                        :stroke-width="6"
                        :show-text="false"
                        class="small-progress"
                      />
                    </div>
                  </div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">组织状态</div>
                  <div class="detail-value">
                    <el-badge :value="'在线'" type="success" effect="light" />
                  </div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">附近资源</div>
                  <div class="detail-value resource-count">0</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">响应速度</div>
                  <div class="detail-value">
                    <el-rate
                      v-model="responseRate"
                      disabled
                      :max="5"
                      :colors="['#5ac8fa']"
                      size="small"
                    />
                  </div>
                </div>

                <div class="action-buttons">
                  <el-button
                    type="primary"
                    size="medium"
                    class="action-btn primary-btn"
                    >实时调度</el-button
                  >
                  <el-button size="medium" class="action-btn secondary-btn"
                    >查看详情</el-button
                  >
                  <el-button size="medium" class="action-btn tertiary-btn"
                    >发送消息</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 中间区域 - 地图 -->
          <el-col
            :span="12"
            style="display: flex; flex-direction: column; height: 100%"
          >
            <!-- 社会化服务资源在线分布图 -->
            <el-card
              class="custom-card glow-card"
              id="centerCard"
              style="
                flex: 1;
                border-radius: 12px;
                border: 1px solid rgba(90, 200, 250, 0.3);
              "
            >
              <div slot="header" class="card-header">
                <i
                  class="el-icon-map-location"
                  style="margin-right: 8px; color: #5ac8fa"
                ></i>
                <span style="color: #fff; font-weight: 600"
                  >社会化服务资源在线分布图</span
                >
                <div class="map-controls">
                  <el-button
                    size="small"
                    type="text"
                    class="map-control-btn"
                    @click="resetMap"
                  >
                    <i class="el-icon-refresh-right"></i>
                  </el-button>
                </div>
              </div>
              <div
                style="width: 100%; height: 100%; min-height: 710px"
                ref="mapChart"
                class="chart-container"
              ></div>
            </el-card>
          </el-col>

          <!-- 右侧区域 -->
          <el-col
            :span="6"
            style="display: flex; flex-direction: column; height: 100%"
          >
            <!-- 智能调度 -->
            <el-card
              class="custom-card glow-card"
              style="
                flex: 1;
                border-radius: 12px;
                border: 1px solid rgba(90, 200, 250, 0.3);
              "
            >
              <div slot="header" class="card-header">
                <i
                  class="el-icon-s-grid"
                  style="margin-right: 8px; color: #5ac8fa"
                ></i>
                <span style="color: #fff; font-weight: 600">智能调度</span>
                <div class="refresh-controls">
                  <el-button
                    size="small"
                    type="text"
                    class="refresh-btn"
                    @click="refreshDispatchList"
                  >
                    <i class="el-icon-refresh"></i>
                  </el-button>
                </div>
              </div>
              <div class="dispatch-section">
                <div class="dispatch-item hover-card">
                  <div class="image-container">
                    <img
                      src="https://picsum.photos/id/123/200/120"
                      alt="水稻直播场景"
                      class="dispatch-image"
                    />
                    <div class="demand-tag">
                      <i class="el-icon-flag"></i> 紧急
                    </div>
                  </div>
                  <div class="dispatch-info">
                    <div class="dispatch-title">全流程服务</div>
                    <div class="dispatch-detail">
                      <div class="detail-row">
                        <span class="label">作物：</span>
                        <span class="value">水稻</span>
                      </div>
                      <div class="detail-row">
                        <span class="label">需求时间：</span>
                        <span class="value">2023/12/1-2023/12/5</span>
                      </div>
                      <div class="detail-row">
                        <span class="label">需求面积：</span>
                        <span class="value highlight">10亩</span>
                      </div>
                    </div>
                    <el-button
                      type="success"
                      size="small"
                      class="dispatch-btn hover-btn"
                      >立即响应</el-button
                    >
                  </div>
                </div>

                <div class="dispatch-item hover-card">
                  <div class="image-container">
                    <img
                      src="https://picsum.photos/id/124/200/120"
                      alt="水稻施肥场景"
                      class="dispatch-image"
                    />
                  </div>
                  <div class="dispatch-info">
                    <div class="dispatch-title">水稻精准施肥</div>
                    <div class="dispatch-detail">
                      <div class="detail-row">
                        <span class="label">作物：</span>
                        <span class="value">水稻</span>
                      </div>
                      <div class="detail-row">
                        <span class="label">需求时间：</span>
                        <span class="value">2023/12/1-2023/12/5</span>
                      </div>
                      <div class="detail-row">
                        <span class="label">需求面积：</span>
                        <span class="value highlight">65亩</span>
                      </div>
                    </div>
                    <el-button
                      type="success"
                      size="small"
                      class="dispatch-btn hover-btn"
                      >立即响应</el-button
                    >
                  </div>
                </div>

                <div class="dispatch-item hover-card">
                  <div class="image-container">
                    <img
                      src="https://picsum.photos/id/125/200/120"
                      alt="病虫害防治场景"
                      class="dispatch-image"
                    />
                  </div>
                  <div class="dispatch-info">
                    <div class="dispatch-title">病虫害综合防治</div>
                    <div class="dispatch-detail">
                      <div class="detail-row">
                        <span class="label">作物：</span>
                        <span class="value">小麦</span>
                      </div>
                      <div class="detail-row">
                        <span class="label">需求时间：</span>
                        <span class="value">2023/12/3-2023/12/7</span>
                      </div>
                      <div class="detail-row">
                        <span class="label">需求面积：</span>
                        <span class="value highlight">45亩</span>
                      </div>
                    </div>
                    <el-button
                      type="success"
                      size="small"
                      class="dispatch-btn hover-btn"
                      >立即响应</el-button
                    >
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import getMap from "@/api/getMap";
import * as echarts from "echarts";

export default {
  name: "DispatchPage",
  data() {
    return {
      serviceResources: [],
      responseRate: 4.5, // 响应速度评分
      mapChart: null,
    };
  },
  mounted() {
    this.initMapChart();
    // 添加页面加载动画效果
    this.$nextTick(() => {
      const cards = document.querySelectorAll(".custom-card");
      cards.forEach((card, index) => {
        setTimeout(() => {
          card.style.opacity = "1";
          card.style.transform = "translateY(0)";
        }, 100 * index);
      });
    });
  },
  beforeDestroy() {
    // 清理事件监听器
    if (this.mapChart) {
      window.removeEventListener("resize", this.handleResize);
      this.mapChart.dispose();
    }
  },
  methods: {
    // 初始化地图散点图
    initMapChart() {
      this.mapChart = echarts.init(this.$refs["mapChart"]);

      // 显示加载动画
      this.mapChart.showLoading({
        text: "数据加载中...",
        textColor: "#fff",
        maskColor: "rgba(0, 0, 0, 0.3)",
        spinnerRadius: 20,
      });

      // 获取中国地图数据并绘制散点图
      getMap
        .then((res) => {
          this.mapChart.hideLoading();

          // 注册中国地图
          echarts.registerMap("china", res.data);

          // 生成服务资源数据
          this.serviceResources = this.generateServiceResources();

          // 配置地图散点图选项
          const option = {
            backgroundColor: "transparent",
            tooltip: {
              trigger: "item",
              backgroundColor: "rgba(0, 30, 60, 0.9)",
              borderColor: "#5ac8fa",
              borderWidth: 1,
              textStyle: {
                color: "#fff",
                fontSize: 13,
              },
              formatter: function (params) {
                if (params.seriesType === "scatter") {
                  return `
                  <div style="padding: 8px;">
                    <div style="font-weight: 600; margin-bottom: 5px;">${params.value[3]}</div>
                    <div>服务次数: <span style="color: #5ac8fa;">${params.value[2]}次</span></div>
                  </div>
                `;
                }
                return params.name;
              },
            },
            geo: {
              map: "china",
              roam: true,
              scaleLimit: {
                min: 1,
                max: 5,
              },
              label: {
                emphasis: {
                  show: true,
                  color: "#fff",
                  fontSize: 12,
                  fontWeight: "bold",
                },
              },
              itemStyle: {
                normal: {
                  areaColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: "#142957" },
                      { offset: 1, color: "#0c1e3e" },
                    ],
                  },
                  borderColor: "#09488e",
                  borderWidth: 1,
                },
                emphasis: {
                  areaColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: "#09488e" },
                      { offset: 1, color: "#142957" },
                    ],
                  },
                  borderColor: "#5ac8fa",
                  borderWidth: 1.5,
                  shadowBlur: 15,
                  shadowColor: "rgba(90, 200, 250, 0.3)",
                },
              },
              // 添加底图网格线
              silent: false,
            },
            // 添加图例
            legend: {
              orient: "horizontal",
              bottom: 10,
              left: "center",
              textStyle: {
                color: "#fff",
              },
              data: ["服务资源"],
              backgroundColor: "rgba(0, 30, 60, 0.7)",
              borderRadius: 5,
              padding: 8,
            },
            series: [
              {
                name: "服务资源",
                type: "scatter",
                coordinateSystem: "geo",
                data: this.serviceResources,
                symbolSize: function (val) {
                  return Math.max(val[2] / 100, 12);
                },
                label: {
                  show: true,
                  position: "top",
                  formatter: function (params) {
                    // 直接显示服务次数
                    return params.value[2] + "次";
                  },
                  color: "#fff",
                  fontSize: 10,
                  fontWeight: "bold",
                  backgroundColor: "rgba(0, 30, 60, 0.7)",
                  borderRadius: 3,
                  padding: [2, 5],
                  borderColor: "#5ac8fa",
                  borderWidth: 0.5,
                },
                itemStyle: {
                  // 使用渐变色填充散点
                  color: function (params) {
                    // 根据服务次数设置不同颜色
                    const value = params.value[2];
                    let baseColor = "#32cd32";
                    if (value > 2000) baseColor = "#ff4500";
                    else if (value > 1000) baseColor = "#ff7f50";
                    else if (value > 500) baseColor = "#ffd700";

                    // 创建径向渐变
                    return new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [
                      { offset: 0, color: "#fff" },
                      { offset: 0.6, color: baseColor },
                      { offset: 1, color: baseColor },
                    ]);
                  },
                  // 添加边框效果
                  borderColor: "#fff",
                  borderWidth: 1.5,
                  // 添加发光效果
                  shadowBlur: 20,
                  shadowColor: function (params) {
                    const value = params.value[2];
                    let shadowColor = "#32cd32";
                    if (value > 2000) shadowColor = "#ff4500";
                    else if (value > 1000) shadowColor = "#ff7f50";
                    else if (value > 500) shadowColor = "#ffd700";
                    return shadowColor;
                  },
                  opacity: 0.95,
                },
                emphasis: {
                  // 鼠标悬停时的强调效果
                  scale: true,
                  scaleSize: 15,
                  itemStyle: {
                    shadowBlur: 30,
                    shadowColor: function (params) {
                      const value = params.value[2];
                      let shadowColor = "#32cd32";
                      if (value > 2000) shadowColor = "#ff4500";
                      else if (value > 1000) shadowColor = "#ff7f50";
                      else if (value > 500) shadowColor = "#ffd700";
                      return shadowColor;
                    },
                  },
                  label: {
                    show: true,
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "#fff",
                    backgroundColor: "rgba(0, 30, 60, 0.9)",
                    borderColor: "#5ac8fa",
                    borderWidth: 1,
                  },
                  animationDuration: 300,
                  animationEasing: "elasticOut",
                },
                // 添加入场动画
                animationType: "scale",
                animationDuration: 1500,
                animationEasing: "elasticOut",
                animationDelay: function (idx) {
                  return Math.random() * 500;
                },
              },
            ],
          };

          this.mapChart.setOption(option);

          // 窗口大小改变时，重新调整图表大小
          window.addEventListener("resize", this.handleResize);
        })
        .catch((error) => {
          console.error("获取地图数据失败:", error);
          this.mapChart.hideLoading();
          this.mapChart.setOption({
            title: {
              text: "社会化服务资源在线分布图 - 数据加载失败",
              subtext: "点击刷新按钮重试",
              left: "center",
              textStyle: {
                color: "#ff4500",
                fontSize: 16,
                fontWeight: "bold",
              },
              subtextStyle: {
                color: "#8aa4ce",
                fontSize: 13,
              },
            },
            backgroundColor: "transparent",
          });
        });
    },

    // 生成模拟的服务资源数据
    generateServiceResources() {
      // 中国主要城市的经纬度和服务次数
      const cityData = [
        [116.405285, 39.904989, 2500, "北京"],
        [121.472644, 31.231706, 2200, "上海"],
        [113.280637, 23.125178, 1800, "广州"],
        [114.085947, 22.547, 1600, "深圳"],
        [104.065735, 30.659462, 1500, "成都"],
        [120.153576, 30.287459, 1400, "杭州"],
        [114.305523, 30.59285, 1300, "武汉"],
        [108.948024, 34.263161, 1200, "西安"],
        [106.504962, 29.533155, 1100, "重庆"],
        [118.767413, 32.041544, 1000, "南京"],
        [117.190182, 39.125596, 950, "天津"],
        [120.619585, 31.298863, 900, "苏州"],
        [112.982279, 28.19409, 850, "长沙"],
        [120.382661, 36.101009, 800, "青岛"],
        [113.665412, 34.757975, 750, "郑州"],
        [113.749638, 23.049663, 700, "东莞"],
        [121.548884, 29.868333, 650, "宁波"],
        [113.122959, 23.029663, 600, "佛山"],
        [117.283042, 31.86119, 550, "合肥"],
        [121.614624, 38.913419, 500, "大连"],
      ];

      return cityData;
    },

    // 处理窗口大小变化
    handleResize() {
      if (this.mapChart) {
        this.mapChart.resize();
      }
    },

    // 重置地图
    resetMap() {
      if (this.mapChart) {
        this.mapChart.dispatchAction({
          type: "restore",
        });
        // 添加刷新动画效果
        this.mapChart.showLoading({
          text: "重置中...",
          textColor: "#fff",
          maskColor: "rgba(0, 0, 0, 0.3)",
        });
        setTimeout(() => {
          this.mapChart.hideLoading();
        }, 500);
      }
    },

    // 刷新调度列表
    refreshDispatchList() {
      const refreshBtn = document.querySelector(".refresh-btn");
      refreshBtn.classList.add("refreshing");

      // 模拟刷新操作
      setTimeout(() => {
        refreshBtn.classList.remove("refreshing");
        // 可以在这里重新加载数据, 例如通过Ajax加载数据
      }, 1000);
    },
  },
};
</script>

<style scoped>
.main-content {
  white-space: nowrap;
  min-width: 1366px; /* 设置最小宽度，防止布局过度压缩 */
  min-height: 768px; /* 设置最小高度 */
}

/* 确保卡片主体内容填满空间 */
.el-card__body {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 自定义卡片样式 */
.custom-card {
  background: rgba(12, 30, 62, 0.85);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  min-height: 600px; /* 添加最小高度 */
}

/* 发光卡片效果 */
.glow-card {
  position: relative;
  overflow: hidden;
}

.glow-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #5ac8fa, transparent);
  z-index: 2;
}

.glow-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    rgba(90, 200, 250, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(12, 30, 62, 0.9);
  border-bottom: 1px solid rgba(90, 200, 250, 0.2);
  border-radius: 12px 12px 0 0;
}

/* 服务详情样式 */
.service-detail {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(30, 77, 133, 0.3);
  transition: all 0.3s ease;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item:hover {
  background: rgba(90, 200, 250, 0.05);
  padding-left: 8px;
  border-left: 3px solid #5ac8fa;
}

.detail-label {
  color: #8aa4ce;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.3s ease;
  min-width: 80px; /* 固定标签宽度 */
}

.detail-value {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.3s ease;
  text-align: right;
  min-width: 100px; /* 固定值宽度 */
}

/* 省略号文本 */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* 完成信息样式 */
.completion-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.small-progress {
  width: 100px !important;
  margin-top: 4px;
}

/* 资源计数样式 */
.resource-count {
  color: #5ac8fa;
  font-weight: bold;
  font-size: 18px;
}

/* 操作按钮区域 */
.action-buttons {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 关键：将所有子项右对齐 */
  gap: 13px;
  margin-top: 25px;
  text-align: left;
  padding-top: 20px;
  border-top: 1px solid rgba(30, 77, 133, 0.5);
  flex-shrink: 0;
}

/* 按钮基础样式 */
.action-btn {
  width: 100%;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.action-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: all 0.6s ease;
}

.action-btn:hover::before {
  left: 100%;
}

/* 主要按钮样式 */
.primary-btn {
  background: linear-gradient(
    90deg,
    rgba(0, 135, 255, 0.9),
    rgba(90, 200, 250, 0.9)
  );
  border: 1px solid rgba(90, 200, 250, 0.5);
  color: #fff;
  box-shadow: 0 4px 12px rgba(90, 200, 250, 0.3);
}

.primary-btn:hover {
  background: linear-gradient(
    90deg,
    rgba(0, 135, 255, 1),
    rgba(90, 200, 250, 1)
  );
  border-color: #5ac8fa;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(90, 200, 250, 0.4);
}

/* 次要按钮样式 */
.secondary-btn {
  background: linear-gradient(
    90deg,
    rgba(45, 59, 89, 0.9),
    rgba(60, 80, 120, 0.9)
  );
  border: 1px solid rgba(90, 200, 250, 0.3);
  color: #fff;
}

.secondary-btn:hover {
  background: linear-gradient(90deg, rgba(55, 70, 99, 1), rgba(70, 90, 130, 1));
  border-color: #5ac8fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(90, 200, 250, 0.2);
}

/* 第三按钮样式 */
.tertiary-btn {
  background: linear-gradient(
    90deg,
    rgba(17, 35, 65, 0.9),
    rgba(30, 50, 85, 0.9)
  );
  border: 1px solid rgba(90, 200, 250, 0.2);
  color: #8aa4ce;
}

.tertiary-btn:hover {
  background: linear-gradient(90deg, rgba(27, 45, 75, 1), rgba(40, 60, 95, 1));
  border-color: #5ac8fa;
  color: #5ac8fa;
  transform: translateY(-2px);
}

/* 地图容器样式 */
.chart-container {
  position: relative;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  min-height: 710px; /* 固定最小高度 */
}

/* 地图控制按钮 */
.map-controls,
.refresh-controls {
  display: flex;
  gap: 8px;
}

.map-control-btn,
.refresh-btn {
  color: #8aa4ce;
  transition: all 0.3s ease;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.map-control-btn:hover,
.refresh-btn:hover {
  color: #5ac8fa;
  background: rgba(90, 200, 250, 0.1);
  transform: scale(1.1);
}

/* 刷新动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.refreshing i {
  animation: rotate 1s linear infinite;
}

/* 调度列表样式 */
.dispatch-section {
  max-height: 700px;
  padding: 16px;
  overflow-y: auto;
}

/* 调度项样式 */
.dispatch-item {
  background: linear-gradient(
    135deg,
    rgba(24, 55, 101, 0.8),
    rgba(12, 30, 62, 0.8)
  );
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #1e4d85;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  min-height: 240px; /* 固定最小高度 */
}

/* 卡片悬停效果 */
.hover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(90, 200, 250, 0.3);
  border-color: #5ac8fa;
}

.hover-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(90, 200, 250, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.hover-card:hover::after {
  opacity: 1;
}

/* 图片容器 */
.image-container {
  position: relative;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  height: 120px; /* 固定高度 */
}

.dispatch-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(90, 200, 250, 0.3);
  transition: transform 0.4s ease;
}

.hover-card:hover .dispatch-image {
  transform: scale(1.05);
}

/* 需求标签 */
.demand-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ff4d4f, #ff7875);
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
  z-index: 2;
}

/* 调度信息样式 */
.dispatch-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.dispatch-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
  text-shadow: 0 0 10px rgba(90, 200, 250, 0.3);
  position: relative;
  display: inline-block;
  align-self: center;
  padding: 0 12px;
}

.dispatch-title::before,
.dispatch-title::after {
  content: "◆";
  color: #5ac8fa;
  font-size: 12px;
  opacity: 0.7;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.dispatch-title::before {
  left: 0;
}

.dispatch-title::after {
  right: 0;
}

.dispatch-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}

.detail-row .label {
  color: #8aa4ce;
  font-weight: 500;
  min-width: 70px; /* 固定标签宽度 */
}

.detail-row .value {
  color: #fff;
  font-weight: 600;
  text-align: right;
  min-width: 80px; /* 固定值宽度 */
}

/* 高亮值 */
.highlight {
  color: #5ac8fa !important;
  font-size: 14px;
}

/* 响应按钮 */
.dispatch-btn {
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(34, 193, 195, 0.9),
    rgba(253, 187, 45, 0.9)
  );
  border: none;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-top: auto; /* 确保按钮始终在底部 */
}

.dispatch-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: all 0.6s ease;
  z-index: -1;
}

.hover-btn:hover::before {
  left: 100%;
}

.dispatch-btn:hover {
  background: linear-gradient(
    90deg,
    rgba(34, 193, 195, 1),
    rgba(253, 187, 45, 1)
  );
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(34, 193, 195, 0.4);
  color: #fff;
}

/* 美化滚动条 */
.dispatch-section::-webkit-scrollbar {
  width: 6px;
}
/*  滚动条轨道 */
.dispatch-section::-webkit-scrollbar-track {
  background: rgba(12, 30, 62, 0.5);
  border-radius: 3px;
}

.dispatch-section::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(0, 187, 236, 0.3),
    rgba(90, 200, 250, 0.8)
  );
  border-radius: 3px;
  transition: background 0.3s ease;
}
/* 滚动条滑块 */
.dispatch-section::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(0, 187, 236, 0.5),
    rgba(90, 200, 250, 1)
  );
}

/* 滚动条按钮 */
.dispatch-section::-webkit-scrollbar-button {
  display: none;
}

/* 适配不同屏幕尺寸 */
@media (max-width: 1600px) {
  .detail-value.ellipsis {
    max-width: 140px;
  }
}

@media (max-width: 1400px) {
  .detail-value.ellipsis {
    max-width: 120px;
  }
}

@media (max-width: 1200px) {
  .detail-value.ellipsis {
    max-width: 100px;
  }
}

/* 大屏幕适配 */
@media (min-width: 1920px) {
  .el-main {
    padding: 20px !important;
  }

  .custom-card {
    min-height: 700px;
  }

  .chart-container {
    min-height: 800px;
  }
}

/* 超小屏幕处理 */
@media (max-width: 1366px) {
  .main-content {
    min-width: 100%;
    overflow-x: auto; /* 允许横向滚动 */
  }
}

/* 移动端适配 */
@media (max-width: 992px) {
  .el-row {
    flex-direction: column;
  }

  .el-col {
    width: 100% !important;
    margin-bottom: 16px;
  }

  .custom-card {
    min-height: auto;
  }

  .main-content {
    min-width: 100%;
    overflow-x: auto;
  }
}
</style>
